import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/styles/main.scss'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import axios from 'axios'

// 全局错误处理，忽略ResizeObserver相关错误
const originalConsoleError = window.console.error;
window.console.error = (...args) => {
  // 忽略ResizeObserver循环错误
  if (args[0] && 
      typeof args[0] === 'string' && 
      args[0].includes('ResizeObserver loop')) {
    return;
  }
  originalConsoleError.apply(console, args);
};

// 配置全局Axios请求拦截器
axios.interceptors.request.use(config => {
  try {
    // 从localStorage和Vuex获取token（确保获取最新token）
    const tokenFromStorage = localStorage.getItem('token');
    const tokenFromStore = store.getters['auth/token'];
    
    // 使用最新的token
    const token = tokenFromStore || tokenFromStorage;
    
    // 记录请求URL和方法（不记录敏感信息）
    console.log(`请求: ${config.method?.toUpperCase()} ${config.url}`);
    
    // 如果token存在，添加到请求头
    if (token) {
      // 确保headers对象存在
      if (!config.headers) {
        config.headers = {};
      }
      
      // 添加两种格式的认证头，确保兼容性
      config.headers['Authorization'] = `Bearer ${token}`;
      config.headers['x-auth-token'] = token;
      
      // 调试信息
      console.log('添加认证令牌到请求', {
        url: config.url,
        tokenLength: token.length,
        tokenStart: token.substring(0, 10) + '...'
      });
    } else {
      console.warn('请求未带认证令牌:', config.url);
      
      // 检查是否需要令牌的路径
      const needAuthPaths = ['/admin/', '/pets', '/users/profile', '/adoptions'];
      const needsAuth = needAuthPaths.some(path => config.url.includes(path));
      
      if (needsAuth) {
        console.error('访问需要认证的路径却没有令牌:', config.url);
        
        // 如果路由对象可用，尝试重定向到登录页
        if (router && typeof router.push === 'function' && !config.url.includes('/auth/login')) {
          console.log('尝试重定向到登录页');
          // 将当前页面作为重定向参数
          const currentPath = router.currentRoute.value.fullPath;
          router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
        }
      }
    }
  } catch (err) {
    console.error('请求拦截器错误:', err);
  }
  
  return config;
}, error => {
  console.error('请求拦截器错误:', error);
  return Promise.reject(error);
});

// 添加响应拦截器处理认证错误
axios.interceptors.response.use(response => {
  // 记录响应状态（不记录敏感数据）
  console.log(`响应: ${response.config.method?.toUpperCase()} ${response.config.url} [${response.status}]`);
  return response;
}, error => {
  console.error('响应错误:', error.message);
  
  // 处理401错误(未授权)
  if (error.response && error.response.status === 401) {
    console.error('认证失败，需要重新登录');
    
    // 清除本地存储的认证信息
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    
    // 显示错误消息
    ElMessage.error('认证已过期，请重新登录');
    
    // 避免在登录页面上再次重定向到登录页面
    if (!error.config.url.includes('/auth/login')) {
      // 保存当前路径用于登录后重定向
      const currentPath = router.currentRoute.value.fullPath;
      const redirect = currentPath !== '/login' ? `?redirect=${encodeURIComponent(currentPath)}` : '';
      
      // 重定向到登录页
      router.push(`/login${redirect}`);
    }
  }
  
  return Promise.reject(error);
});

// 全局处理图片加载错误
document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('error', function(event) {
    // 检查错误是否来自图片元素
    if (event.target.tagName.toLowerCase() === 'img') {
      // 检查src是否包含uploads路径（后端图片路径）
      if (event.target.src.includes('/uploads/')) {
        // 将加载失败的图片替换为占位图
        event.target.src = 'https://via.placeholder.com/200x200?text=Image+Not+Found';
      }
    }
  }, true);
});

const app = createApp(App)

// 修改Element Plus错误消息显示
// 拦截Element Plus消息
const originalElMessageError = ElMessage.error;
ElMessage.error = (options) => {
  if (typeof options === 'string' && options.includes('加载分类数据失败')) {
    console.log('已阻止显示错误提示:', options);
    return null;
  }
  if (options && options.message && options.message.includes('加载分类数据失败')) {
    console.log('已阻止显示错误提示:', options.message);
    return null;
  }
  return originalElMessageError(options);
};

app.use(store)
app.use(router)
app.use(ElementPlus)

// 全局指令：处理图片加载错误
app.directive('img-fallback', {
  mounted(el, binding) {
    const handleError = () => {
      // 当图片加载失败时，使用fallback值或默认图片
      el.src = binding.value || 'https://via.placeholder.com/200x200?text=Image+Not+Found';
      // 移除error监听器，防止循环触发
      el.removeEventListener('error', handleError);
    };
    el.addEventListener('error', handleError);
  }
});

app.mount('#app') 